{% extends '@AdsPlace/admin.twig' %}

{#内容部分#}
{% block content %}
   <div class="mod12">
       <div class="right-head">
            <el-breadcrumb separator-class="el-icon-arrow-right">
             <el-breadcrumb-item >投放管理</el-breadcrumb-item>
             <el-breadcrumb-item>广告物料管理</el-breadcrumb-item>
           </el-breadcrumb>
       </div>
       <div class="toolbar-btn-action">
           
           <div class="searchBox">
               
                    <el-input placeholder="请输入物料名称或者ID"
                     v-on:change="onKeywordChange"
                     v-model="keyword" class="input-with-select">
                     
                      <el-button slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                 
           </div>
       {# 功能按钮#}
           <el-button
           @click="OnOpenDrawer"
            type="primary" icon="el-icon-plus">新建物料</el-button>
           {#
           <el-button-group>
                <el-button type=""  v-bind:disabled="stopDisabled">停用</el-button>
                <el-button type="" v-bind:disabled="delDisabled">删除</el-button>
                <el-button type=""  v-bind:disabled="startDisabled">启用</el-button>
                 <el-button type="" v-bind:disabled="getCodeDisabled" >获取代码</el-button>
              </el-button-group>#}
           <el-button type="" @click="OnShowPlaceSearch" >
           筛选 <i ref="dropIcon" class="el-icon-caret-top"></i>
           <!-- el-icon-caret-bottom -->
           </el-button>
       </div>
       {# 这里是新增广告位   #}
       <el-drawer
          ref="newPlaceDrawer"
          title="新建广告物料"
          :append-to-body="true"
          :visible.sync="drawerNewPlace"        
          :show-close="true"
          :before-close="handleDrawerClose"
          :wrapper-closable='false'
          :destroy-on-close="true"
          :with-header="true"
          size="85%">
           <div class="formBox" >
              <medias-add-form
              :medias-row="editRow"
              v-on:onclosedrawer="onCloseDrawer"
              ></medias-add-form>
           </div>
        </el-drawer>
   {# 筛选功能表单 #}
  <el-card class="rowbox"   v-if="showPlaceSearch">  
      <transition name="fade">
        <medias-search 
         v-on:onselectchange="onSelectChange">
         </medias-search>
      </transition>  
  </el-card>

  {# 列表内容显示区域 #}
       <div class="table-responsive"  v-loading="tableLoading">
            <el-table
                     v-bind:data="tablelist"                           
                     border
                      ref="multipleTable"
                       @selection-change="handleSelectionChange"
                       :cell-class-name="cellClassName"
                       :header-cell-class-name="cellClassName"
                     style="width: 100%">
              <el-table-column
                          type="selection"
                          width="55"> 
                  </el-table-column>      
              <el-table-column
                     prop="name"
                     label="广告物料名称"
                     width="180">
                      <template slot-scope="scope">
                        <p><a>${scope.row.name}</a></p>
                        <p>ID: ${scope.row.id}</p>
                     </template>
                     </el-table-column>
             <el-table-column
                     prop="content"
                     label="广告物料预览"   >
                      <template slot-scope="scope">

                       <div v-if="scope.row.type=='image'"  class="adcontent" >
                        <el-image
                           :src="filter_content(scope.row.content)"
                           :preview-src-list="[filter_content(scope.row.content)]">
                         </el-image>  
                        </div>
                      <div v-else-if="scope.row.type=='stream'" class="stream">
                            <stream-view-san :cntype="scope.row.cntype" :cnrow="scope.row.content"></stream-view-san>
                        </div>
                       <div v-else class="adcontent">
                           <div  v-html="filter_content(scope.row.content)"></div>
                       </div> 
                      </template>
                     </el-table-column>
             <el-table-column
                     prop="width"
                     label="尺寸"  class="center" >
                     <template slot-scope="scope">
                        <span v-if="scope.row.width">${scope.row.width} * ${scope.row.height}</span>
                        <span v-else> -- </span>
                      </template>

                     </el-table-column>
             <el-table-column
                     prop="type"
                     label="类型"   >
                     <template slot-scope="scope">
                           <span>${scope.row.type|filter_type}</span>
                      </template>
                  </el-table-column>     
             
              <el-table-column
                     prop="disabled"
                     label="状态"   >
                      <template slot-scope="scope">
                           <span>${scope.row.disabled|filter_disabled}</span>
                      </template>
                     </el-table-column>                     
              <el-table-column label="操作">
                        <template slot-scope="scope">
                           <el-button
                           size="mini" type="text"
                           @click="handleEdit(scope.$index, scope.row)">修改</el-button>
 
                           <el-button
                           size="mini" type="text"
                           @click="handleDelete(scope.$index, scope.row)">删除</el-button>

                           <el-button
                           size="mini" type="text"
                           @click="handleCopy(scope.$index, scope.row)">复制</el-button>

                  <el-dropdown  @command="onPreview">
                     <span class="el-dropdown-link">
                        更多<i class="el-icon-arrow-down el-icon--right"></i>
                     </span>
                     <el-dropdown-menu slot="dropdown">
                        
                        <el-dropdown-item  :command="{index:scope.$index, row:scope.row,action:'preview'}">预览</el-dropdown-item>
                        <el-dropdown-item  :command="{index:scope.$index, row:scope.row,action:'chart'}">报告</el-dropdown-item>
                        
                     </el-dropdown-menu>
               </el-dropdown>


                        </template>
                     </el-table-column>
                  </el-table>
         </div>
         <div class="pagination" style="margin-left: -10px;">
         <el-pagination
               background
                  :page-size="pageSize"
               @current-change="handleCurrentChange"
               @size-change="handlePageSize"
               :page-sizes="[5,10,20,30,50,70,100]"
                  layout="prev, pager, next,total,jumper,sizes"
                  :total="total" :page-count="total" >
         </el-pagination>
         </div>
   {# table  内容 #}
   </div>
{% endblock%}
{# 这里加入需要的vue组件js#}
{% block pagejs %}
 <script src="./plugins/AdsPlace/js/dist/index.js"></script> 
 <script src="./plugins/AdsPlace/js/page/medias.js"></script>   
{% endblock%}